<div class="layuimini-main" style="padding-left: 40px">

    <div class="layui-form layui-form-pane">
        <fieldset class="layui-elem-field  layui-field-title">
            <legend>SEO 设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label required">产品URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="required" lay-reqtext="URL 不能为空" placeholder="产品URL"
                       value="@if($data['edit']){{ $data['info']->url }}@endif" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">SEO标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" lay-reqtext="Title 不能为空" placeholder="SEO title"
                       value="@if($data['edit']){{ $data['info']->title }}@endif" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">关键词</label>
            <div class="layui-input-block">
                <input type="text" name="keywords" lay-verify="required" lay-reqtext="Title 不能为空" autocomplete="off"
                       value="@if($data['edit']){{ $data['info']->keywords }}@endif" placeholder="SEO keywords" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">SEO Description</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea"
                          placeholder="SEO Description 长度不超过200个字符">@if($data['edit']){{ $data['info']->description }}@endif</textarea>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>产品信息设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">产品分类</label>
            <div class="layui-input-block">
                <label>
                    <select name="category_id" lay-filter="category_id">
                        <option value="1">产品</option>
                        @if($data['edit'])
                            @foreach($data['product_children'] as $v)
                                @if($data['info']->category_id == $v->id)
                                    <option value="{{ $v->id }}" selected>{{ $v->name }}</option>
                                @else
                                    <option value="{{ $v->id }}">{{ $v->name }}</option>
                                @endif
                            @endforeach
                        @else
                            @foreach($data['product_children'] as $v)
                                <option value="{{ $v->id }}">{{ $v->name }}</option>
                            @endforeach
                        @endif
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品PDF</label>
            <div class="layui-input-block">
                <label>
                    <select name="pdf_id" lay-filter="pdf_id">
                        @if($data['edit'])
                            @foreach($data['product_pdf'] as $v)
                                @if($data['info']->pdf_id == $v->id)
                                    <option value="{{ $v->id }}" selected>{{ $v->name }}</option>
                                @else
                                    <option value="{{ $v->id }}">{{ $v->name }}</option>
                                @endif
                            @endforeach
                        @else
                            @foreach($data['product_pdf'] as $v)
                                <option value="{{ $v->id }}">{{ $v->name }}</option>
                            @endforeach
                        @endif
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品名称</label>
            <div class="layui-input-block">
                <input type="text" name="product_name" lay-verify="required" lay-reqtext="产品名称不能为空"
                       value="@if($data['edit']){{ $data['info']->product_name }}@endif" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">产品描述</label>
            <div class="layui-input-block">
                <textarea name="product_abstract" class="layui-textarea"
                          placeholder="产品描述 长度不超过200个字符">@if($data['edit']){{ $data['info']->product_abstract }}@endif</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品缩略图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="product_img">上传图片</button>
                    <input type="text" disabled="disabled" name="product_img"  value="@if($data['edit']){{ $data['info']->product_img }}@endif" style="float: left; width: 50%;" placeholder="500 * 338" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-upload-list" >
                <img class="layui-upload-img" id="upload_img_demo" src="@if($data['edit']){{ $data['info']->product_img }}@endif" style="border: 1px solid #cccccc">
                <p id="demo_text"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">产品轮播图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="product_banner">多图片上传</button>
                    <input type="text" disabled="disabled" name="product_banner" style="float:left; width: 50%;"
                           value="@if($data['edit']){{ $data['info']->product_banner }}@endif" autocomplete="off" class="layui-input" placeholder="770 * 380">
                </div>
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="slider_show">
                    @if($data['edit'])
                        @foreach( $data['info']['banners'] as $v )
                            <span style="position: relative;width: 200px;height: 200px" class="imgs">
                            <img style="width: 200px;" src="{{ $v }}" alt="" class="layui-upload-img">
                            <i class="layui-icon" title="移除图片" style="color: #ff0000;font-size: 60px; position: absolute;top:0 ; right: 40%;cursor: pointer;  "></i>
                            </span>
                        @endforeach
                    @endif
                </div>
            </blockquote>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">产品内容</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" cols="30" rows="10">@if($data['edit']){!! $data['info']->product_content !!}@endif</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="checkbox" id="form_type" name="" title="修改"
                       value="@if($data['edit']){{1}}@endif"
                       @if($data['edit']) checked @endif
                       lay-skin="primary" disabled>
{{--                <input type="checkbox" id="form_type" name="" title="修改" lay-skin="primary" disabled @if($data['edit']) checked @endif>--}}
                <input type="hidden" value="@if($data['edit']){{ $data['info']->id }}@endif" id="id" name="id">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
        <div class="layui-form-item"></div>
    </div>
</div>

<script>
    layui.use(['form', 'iconPickerFa','miniUpload'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniUpload = layui.miniUpload,
            $ = layui.$;
        var miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        console.log($('#form_type').val() == 1)
        // 上传缩略图
        miniUpload.uploadImg('product_img', 'upload_img_demo');
        //多图片上传
        miniUpload.uploadImages('product_banner', 'slider_show');

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            var url = '';
            var method = '';
            if ($('#form_type').val() == 1 ){
                url = 'product/'+ data.field.id;
                method = 'PUT'
            }else {
                url = 'product';
                method = 'POST'
            }
            data.field.product_content = tinymce.get('content').getContent();
            console.log(url)
            $.ajax({
                url: url,
                method: method,
                data: data.field,
                success: function (res) {
                    console.log(res)
                    if (res.code === 0) {
                        layer.msg('保存成功', {icon: 1}, function () {
                            // 刷新列表
                            var options = {};
                            options.homeInfo = options.homeInfo || {};
                            miniPage.refresh(options);
                        })
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function (res) {
                    layer.msg('请求错误', {icon: 5})
                }
            });
            return false;
        });
    });
</script>
<script src="{{ asset('/admin/lib/tinymce/tinymce.min.js') }}"></script>
<script>
    tinymce.init({
        selector:'#content',
        language:'zh_CN',
        max_height:800,
        plugins: 'print preview searchreplace autolink directionality visualchars fullscreen image link media template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern paste emoticons  autoresize',
        toolbar: 'preview code | removeformat alignleft aligncenter alignright indent2em lineheight  | fontsizeselect forecolor backcolor bold italic underline strikethrough link anchor | bullist numlist | blockquote subscript superscript | table image media charmap hr pagebreak insertdatetime | fullscreen ',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        autosave_ask_before_unload: false,
        toolbar_drawer : false,
        // 图片上传
        // images_upload_url: '/admin/upload/edit',
        images_upload_handler: function (blobInfo, success, failure) {
            var xhr, formData;
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '{{route("image.editor")}}');
            var token = '{{ csrf_token() }}';
            xhr.setRequestHeader("X-CSRF-Token", token);
            xhr.onload = function() {
                var json;

                if (xhr.status != 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                if (!json || typeof json.location != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                success(json.location);
            };
            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            xhr.send(formData);
        },
    })
</script>
